<template>
    <div id="brands" :style="{background: bgColor}">
        <div class="brands-container">
            <div class="top">
                <div class="title">{{title}}</div>
                <div class="desc">{{desc}}</div>
            </div>
            <div class="list">
                <div class="item" :key="index" v-for="(item, index) in 12">
                    <img :src="`img/pp_${index + 1}.png`" alt="brand">
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        desc: {
            type: String,
            default: ''
        },
        list: {
            type: Object,
            default: []
        },
        bgColor: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            activeIndex: '0',
            transName: ''
        }
    },
}
</script>

<style lang="scss" scoped>
#brands {
    background: #eee;
    .brands-container {
        width: 1298px;
        padding: 80px 0 50px;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center;
        .title {
            width: 100%;
            color: #333333;
            font-size: 36px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .desc {
            width: 100%;
            color: #999999;
            font-size: 16px;
            margin-bottom: 50px;
        }
        .list {
            display: flex;
            flex-wrap: wrap;
            .item {
                width: 160px;
                height: 70px;
                margin: 30px 24px;
                border-radius: 6px;
                background: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    height: 100%;
                }
            }
        }
        .ml-48 {
            margin-left: 48px;
        }
    }
}
</style>